<template>
  <!-- 登录进来后的顶部 代理商 修改密码 退出登录 -->
  <nav class="site-navbar" :class="'site-navbar--'">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand">
        <a class="site-navbar__brand-lg" href="javascript:;">
          {{ $company.name }}
        </a>
        <a class="site-navbar__brand-mini" href="javascript:;">
          {{ $company.name }}
        </a>
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <el-menu class="site-navbar__menu" mode="horizontal"></el-menu>
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"
      >
        <el-menu-item class="site-navbar__avatar" index="3">
          <a
            :title="userInfo.phone"
            href="javascript:;"
            class="el-dropdown-link"
            >{{ userInfo.roles === "agency" ? "代理商角色" : "运行商角色" }}-{{
              userInfo.role_name || "--"
            }}</a
          >
        </el-menu-item>

        <el-menu-item index="4" @click.native="updatePasswordHandle()">
          <span>修改密码</span>
        </el-menu-item>

        <el-menu-item index="5" @click.native="logoutHandle()">
          <span>退出登录</span>
          <!-- <el-badge value="hot">
            <span>退出登录</span>
          </el-badge>-->
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password
      v-if="updatePassowrdVisible"
      ref="updatePassowrd"
    ></update-password>
  </nav>
</template>

<script>
// 引入修改密码页面的组件
import UpdatePassword from "./main-navbar-update-password";
import axios from "axios";
import { clearLoginInfo } from "@/utils"; //退出登录方法
export default {
  data() {
    return {
      updatePassowrdVisible: false, //控制修改密码弹窗的变量
      programName: "",
      userInfo: {},
      token: "",
    };
  },
  components: {
    UpdatePassword, //注册修改密码页面的组件
  },
  computed: {
    navbarLayoutType: {
      // 引入vuex的导航条, 布局风格
      get() {
        return this.$store.state.common.navbarLayoutType;
      },
    },
    // 引入vuex的侧边栏, 折叠状态
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      },
      set(val) {
        this.$store.commit("common/updateSidebarFold", val);
      },
    },
    // 引入vuex的主入口标签页
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      },
    },
    // 拿到本地存储的数据
    userName: {
      get() {
        return sessionStorage.username;
      },
    },
    roleName() {
      return sessionStorage.roleName;
    },
    name() {
      return sessionStorage.name;
    },
    remark: {
      get() {
        return sessionStorage.getItem("remark");
      },
    },
  },
  created() {
    this.token = sessionStorage.getItem("token");
    // 拿到本地存储中，登录成功后存储的用户信息userInfo，然后再赋值给此组件的userInfo
    let userInfo = window.sessionStorage.getItem("userInfo");
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
  },
  methods: {
    // 修改密码
    updatePasswordHandle() {
      this.updatePassowrdVisible = true;
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init();
      });
    },
    // 退出登录
    logoutHandle() {
      this.$confirm(`确定进行[退出]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          clearLoginInfo(); //退出登录会调用utils/index.js的clearLoginInfo（）清除登录信息方法

          this.$router.push({
            //往路由添加名字为login的路由
            name: "login",
          });
          // location.reload();
          // 发送退出登录的请求

          axios({
            method: "POST",
            url: this.$company.loginOut_httpUrl,
            data: { token: this.token },
          })
            .then((res) => {
              //登录成功时执行
              console.log(res.data);
              if (res.data.code == 0) {
                // 登录成功提示消息
                this.$message.success("退出成功");
              }
              // 如果状态码不为0，就提示错误信息
              else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              //如果执行失败，就执行这里
              this.$message.error(err);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss"></style>
